<!--
* description: 索赔单审核
* author: xuliwen
* createdDate: 2021-01-21
-->
<template>
  <div class="app-container app-container-table">
    <one-table-template
      ref="multipleTable"
      :key="oneTableKey"
      :dynamic-buttons="tableButtons"
      :dynamic-components="tableComponents"
      :dynamic-api-config="apiConfig"
      :dynamic-table-cols="tableCols"
      :dynamic-form-fields="formField"
      :dynamic-is-show-select="false"
      :dynamic-is-init-table="true"
      :dynamic-api-style="'restful'"
      :callback-obj="callbackObj"
    />

    <edit
      :key="editPopupsKey"
      :dynamic-edit-row-data="editRowData"
      :popups-visible.sync="editPopupsVisible"
      :popups-state="editPopupsState"
    />
    <claimAuditDetails
      :key="detailsPopupsKey"
      :dynamic-edit-row-data="detailsRowData"
      :popups-visible.sync="detailsPopupsVisible"
      @closeviewData="closeviewData"
    />
  </div>
</template>
<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import { exportExcel } from '@/utils/getTimeString.js'
import api from '@/api/se/apiClaimService'
import Vue from 'vue'

export default {
  name: 'ClaimApplicationVerify',

  components: {
    OneTableTemplate,
    Edit: () => import('./edit'),
    ClaimAuditDetails: () => import('./claimAuditDetails')
  },
  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins],

  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData([to.path, ''], function() {
      next(vm => { vm.queryTable() })
    })
  },

  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path

    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])

    return {
      editRowData: {},

      detailsPopupsKey: '1',
      detailsRowData: {},
      detailsPopupsVisible: false,
      // 网格查询API配置对象
      apiConfig: api.findClaimList,

      selectiondata: [],
      callbackObj: {
        // 当选择项发生变化时会触发该事件（多选时）
        onCheckSelectChange: (selection) => {
          this.selectiondata = selection
          this.onCheckSelectChange1(selection)
        }
      },

      // 动态组件-按钮
      tableButtons: [
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          name: 'search',
          clickEvent: () => this.queryTable(),
          text: this.$t('sys.button.query'), // 查询
          position: 'right',
          fuzzySearch: true
        },
        {
          compKey: 'btnKey2',
          size: 'small',
          name: 'reset',
          clickEvent: () => this.reset(),
          text: this.$t('sys.button.reset'),
          position: 'right' // 重置
        },
        {
          compKey: 'btnKey4',
          size: 'small',
          clickEvent: () => this.exportExcel111(),
          text: '导出',
          name: 'export',
          position: 'left'
        }
      ],

      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
            {
              compKey: 'compKey1',
              labelName: '提交日期：',
              codeField: 'createdStartTime,createdEndTime',
              component: () =>
                import('@/components/org/datePicker/datePicker'),
              dateType: 'daterange',
              isMul: false,
              isMust: true
            },
            {
              compKey: 'compKey2',
              labelName: '保修鉴定单号：',
              codeField: 'claimCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: true
            },
            {
              compKey: 'compKey3',
              labelName: '派工单号：',
              codeField: 'repairOrderCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: true
            },
            {
              compKey: 'compKey4',
              labelName: '保修鉴定单状态：',
              codeField: 'claimStatus',
              textField: 'claimStatusName',
              customObj: {
                api: api.orderStatusList,
                defOptionFields: ['claimStatusCode', 'claimStatusName']
              },
              component: () => import('@/components/org/commonSelect'),
              isMul: false,
              isMust: true
            },
            {
              compKey: 'compKey5',
              labelName: '车牌号：',
              codeField: 'carLicense',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: false
            },
            {
              compKey: 'compKey6',
              labelName: 'VIN：',
              codeField: 'VIN',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: false
            },
            {
              compKey: 'compKey7',
              labelName: '车主姓名：',
              codeField: 'custName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: false
            },
            {
              compKey: 'compKey8',
              labelName: '车主电话：',
              codeField: 'phone',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: false
            },
            {
              compKey: 'compKey9',
              labelName: '索赔分类：',
              codeField: 'claimType',
              textField: 'claimCategoryName',
              customObj: {
                api: api.findClaimCategory,
                defOptionFields: ['claimCategoryCode', 'claimCategoryName']
              },
              component: () => import('@/components/org/commonSelect'),
              type: 'dropdownList',
              isMul: false,
              isMust: false
            },
            {
              compKey: 'compKey10',
              labelName: '活动/同意编号：',
              codeField: 'agreeNO',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: false
            },
            {
              compKey: 'compKey11',
              labelName: '门店编码：',
              codeField: 'dlrCode',
              component: () => import('@/components/ve/multipleSearchInput'),
              type: 'inputText',
              isMust: false,
              dataToObject: {
                // 控制弹窗页面 搜索 网格 元素
                tableComponents: [
                  {
                    compKey: 'compKey1',
                    labelName: '门店编码：',
                    codeField: 'vehicleCode',
                    component: () => import('@/components/org/commonInput'),
                    type: 'inputText',
                    isMust: true,
                    span: 8
                  },
                  {
                    compKey: 'compKey2',
                    labelName: '门店名称：',
                    codeField: 'vehicleName',
                    component: () => import('@/components/org/commonInput'),
                    type: 'inputText',
                    isMust: true,
                    span: 8
                  }
                ],
                tableCols: [
                  {
                    prop: 'dlrCode',
                    label: '门店编码'
                  },
                  {
                    prop: 'dlrName',
                    label: '门店名称'
                  }
                ],
                returnField: {
                  prop: 'dlrCode',
                  label: '门店编码'
                },
                api: api.queryDlrInfo
              },
              span: 6
            }
          ],

      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'claimID',
              label: '保修索赔ID',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'updateControlId',
              label: '并发控制ID',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'controlBtn1',
              label: '操作',
              minWidth: 180,
              isComponent: true,
              comps: [
                {
                  compKey: 'propKey2',
                  labelName: '查看',
                  codeField: 'editControlBtn',
                  rowFileds:
                      'show:claimStatus-业务审核拒绝|业务审核通过|作废|已结算|旧件审核拒绝|旧件审核通过|申诉中|自动审核通过|退回',
                  clickEvent: (index) => this.claimAuditDetails(index),
                  component: () => import('@/components/org/linkButton'),
                  align: 'center'
                },
                {
                  compKey: 'propKey1',
                  labelName: '审核',
                  rowFileds: 'show:claimStatus-未审核|待审核',
                  component: () => import('@/components/org/linkButton'),
                  clickEvent: (index) => this.edit(index)
                }
              ]
            },
            {
              prop: 'claimCode',
              label: '保修鉴定单号',
              width: '150px'
            },
            {
              prop: 'claimType',
              label: '索赔分类'
            },

            {
              prop: 'createdDate',
              label: '提交日期',
              width: '150px'
            },
            {
              prop: 'claimStatus',
              label: '保修鉴定单状态'
            },
            {
              prop: 'repairOrderCode',
              label: '派工单号'
            },
            {
              prop: 'agreeNO',
              label: '活动/同意编号'
            },
            {
              prop: 'carLicense',
              label: '车牌号'
            },
            {
              prop: 'partName',
              label: '主损件名称'
            },
            {
              prop: 'pfpCode',
              label: '主损件编码'
            },
            // {
            //   prop: 'custName',
            //   label: '车主名称'
            // },
            // {
            //   prop: 'phone',
            //   label: '车主电话',
            //   width: '120px'
            // },
            {
              prop: 'saleDate',
              label: '销售日期',
              width: '150px'
            },
            {
              prop: 'mileage',
              label: '行驶里程'
            }
            // {
            //   prop: 'checkMan',
            //   label: '审核人'
            // },
            // {
            //   prop: 'checkTime',
            //   label: '审核时间',
            //   width: '150px'
            // },
            // {
            //   prop: 'checkInfo',
            //   label: '审核意见',
            //   width: '150px'
            // }
          ],

      // 表单查询数据
      formField: this.$utils.getFormField(
        this,
        {
          createdStartTime: '',
          createdEndTime: '',
          claimCode: '',
          repairOrderCode: '',
          claimStatus: '10',
          carLicense: '',
          VIN: '',
          custName: '',
          phone: '',
          claimType: '',
          agreeNO: '',
          dlrCode: ''

        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      )
    }
  },

  mounted() {
    // 列表查询
    this.queryTable()
  },

  methods: {
    // 导出
    exportExcel111() {
      exportExcel(
        this.formField,
        api.claimListImport.APIUrl,
        api.claimListImport.ServiceCode,
        '索赔单审核'
      )
    },
    // 编辑获取数据
    edit(index) {
      this.editPopupsState = 'edit'
      this.editPopupsVisible = true
      this.editRowData = this.$utils.deepCopy(
        this.$refs['multipleTable'].list[index]
      )
    },
    claimAuditDetails(index) {
      this.editPopupsState = 'edit'
      this.detailsPopupsVisible = true
      this.detailsRowData = this.$utils.deepCopy(
        this.$refs['multipleTable'].list[index]
      )
    },
    // 关闭弹窗
    closeviewData() {
      this.detailsPopupsVisible = false
      this.detailsPopupsKey = this.$utils.generateId()
    }
  }
}
</script>
